--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Node / ReticulumProjects / MeshChatX.git / files / meshchatx / src / frontend / components / tools / RNPathTracePage.vue
Displaying Raw • Download
meshchatx/src/frontend/components/tools/RNPathTracePage.vue fa46dc4ce9ab50cbe66a7a9e4b3bca0140102345 (fa46dc4c) Text, 20.83 KB
T8b949e<!-- SPDX-License-Identifier: 0BSD -->
Tb4b4b4<Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex flex-col flex-1 overflow-hidden min-w-0 bg-slate-50 dark:bg-zinc-950"Tb4b4b4>
Tb4b4b4<Tff7b72ToolsPageHeader
Te6edf3iconTff7b72=Ta5d6ff"map-marker-path"
Tb4b4b4:Te6edf3titleTff7b72=Ta5d6ff"Te6edf3$tTb4b4b4(Ta5d6ff'tools.rnpath_trace.title'Tb4b4b4)Ta5d6ff"
Tb4b4b4:Te6edf3descriptionTff7b72=Ta5d6ff"Te6edf3$tTb4b4b4(Ta5d6ff'tools.rnpath_trace.description'Tb4b4b4)Ta5d6ff"
Te6edf3accentTff7b72=Ta5d6ff"blue"
Tb4b4b4>
Tb4b4b4<Tff7b72template #Te6edf3actionsTb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3traceResultTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"p-2 text-gray-400 hover:text-indigo-500 dark:hover:text-indigo-400 transition-colors shrink-0"
Te6edf3titleTff7b72=Ta5d6ff"Refresh Trace"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3runTraceTa5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"refresh" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Tb4b4b4{ Ta5d6ff'animate-spin'Tff7b72: Te6edf3isLoading Tb4b4b4}Ta5d6ff" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72ToolsPageHeaderTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex-1 overflow-y-auto min-w-0"Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"p-3 sm:p-4 md:p-6 max-w-5xl mx-auto space-y-4 sm:space-y-6 pb-[max(1rem,env(safe-area-inset-bottom))]"
Tb4b4b4>
T8b949e<!-- main input card -->
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-3 sm:p-4 md:p-6"
Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex flex-col sm:flex-row items-stretch sm:items-center gap-3"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"relative flex-1 min-w-0"Tb4b4b4>
Tb4b4b4<Tff7b72input
Te6edf3v-modelTff7b72=Ta5d6ff"Te6edf3destinationHashTa5d6ff"
Te6edf3typeTff7b72=Ta5d6ff"text"
Te6edf3placeholderTff7b72=Ta5d6ff"input destination hash"
Te6edf3classTff7b72=Ta5d6ff"w-full pl-4 pr-12 py-3 bg-gray-50 dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg text-sm md:text-base font-mono focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-hidden transition-all dark:text-white"
Tb4b4b4@Te6edf3keyupTb4b4b4.Te6edf3enterTff7b72=Ta5d6ff"Te6edf3runTraceTa5d6ff"
Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-zinc-500"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"identifier" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3typeTff7b72=Ta5d6ff"button"
Te6edf3classTff7b72=Ta5d6ff"w-full sm:w-auto sm:min-w-12 h-12 sm:h-14 px-4 sm:px-0 bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg flex items-center justify-center gap-2 transition active:scale-95 disabled:opacity-50 shrink-0"
Tb4b4b4:Te6edf3disabledTff7b72=Ta5d6ff"Tff7b72!Te6edf3isValidHash Tff7b72|| Te6edf3isLoadingTa5d6ff"
Te6edf3titleTff7b72=Ta5d6ff"Trace Path"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3runTraceTa5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon
Te6edf3v-ifTff7b72=Ta5d6ff"Tff7b72!Te6edf3isLoadingTa5d6ff"
Te6edf3icon-nameTff7b72=Ta5d6ff"keyboard-return"
Te6edf3classTff7b72=Ta5d6ff"size-6 sm:size-7"
Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3v-else Te6edf3icon-nameTff7b72=Ta5d6ff"loading" Te6edf3classTff7b72=Ta5d6ff"size-6 animate-spin" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72span Te6edf3classTff7b72=Ta5d6ff"sm:hidden font-semibold"Tb4b4b4>Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.rnpath_trace.trace"Tb4b4b4) Tff7b72}}Tb4b4b4<Tb4b4b4/Tff7b72spanTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- results area -->
Tb4b4b4<Tff7b72div Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3traceResult Tff7b72|| Te6edf3isLoading Tff7b72|| Te6edf3errorTa5d6ff" Te6edf3classTff7b72=Ta5d6ff"space-y-6"Tb4b4b4>
T8b949e<!-- loading state -->
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3isLoadingTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-8 sm:p-12 flex flex-col items-center justify-center gap-4"
Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"relative"Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"w-12 h-12 border-4 border-indigo-200 dark:border-indigo-900/30 border-t-indigo-600 rounded-full animate-spin"
Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-sm font-medium text-gray-600 dark:text-gray-400"Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.rnpath_trace.tracing"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- error state -->
Tb4b4b4<Tff7b72div
Te6edf3v-else-ifTff7b72=Ta5d6ff"Te6edf3errorTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"rounded-lg border border-gray-200 dark:border-zinc-800 border-l-4 border-l-red-500 p-4 sm:p-6 bg-red-50/50 dark:bg-red-900/10"
Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex items-start gap-3 text-red-600 dark:text-red-400"Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"alert-circle" Te6edf3classTff7b72=Ta5d6ff"size-5 md:size-6 shrink-0 mt-0.5" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"space-y-1"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"font-bold text-sm md:text-base"Tb4b4b4>Trace ErrorTb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-xs md:text-sm opacity-90 break-all whitespace-pre-wrap font-mono"Tb4b4b4>
Tff7b72{{ Te6edf3error Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- success state -->
Tb4b4b4<Tff7b72div
Te6edf3v-else-ifTff7b72=Ta5d6ff"Te6edf3traceResultTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500"
Tb4b4b4>
T8b949e<!-- compact summary bar -->
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-1 overflow-hidden"
Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex flex-wrap items-center divide-x divide-gray-100 dark:divide-zinc-800"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex-1 min-w-[120px] p-3 md:p-4 flex flex-col items-center text-center"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1"Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.rnpath_trace.total_hops"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-xl md:text-2xl font-black text-indigo-600 dark:text-indigo-400"Tb4b4b4>
Tff7b72{{ Te6edf3traceResultTb4b4b4.Te6edf3hops Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex-1 min-w-[120px] p-3 md:p-4 flex flex-col items-center text-center"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1"Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.rnpath_trace.interface"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"text-xs md:text-sm font-bold text-gray-700 dark:text-zinc-200 truncate max-w-full"
Tb4b4b4>
Tff7b72{{ Te6edf3traceResultTb4b4b4.Tff7b72interface Tff7b72|| Ta5d6ff"None" Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"flex-1 min-w-[120px] p-3 md:p-4 flex flex-col items-center text-center hidden sm:flex"
Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1"Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.rnpath_trace.next_hop"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"text-[10px] md:text-xs font-mono font-bold text-gray-700 dark:text-zinc-300 truncate max-w-full"
Tb4b4b4>
Tff7b72{{ Te6edf3traceResultTb4b4b4.Te6edf3next_hop Tff7b72|| Ta5d6ff"N/A" Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- path visualization -->
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 md:p-10 lg:p-16"
Tb4b4b4>
T8b949e<!-- Desktop View (Horizontal) -->
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"hidden md:flex items-start justify-center min-w-fit py-4"Tb4b4b4>
Tb4b4b4<Tff7b72template Te6edf3v-forTff7b72=Ta5d6ff"Tb4b4b4(Te6edf3nodeTb4b4b4, Te6edf3idxTb4b4b4) Tff7b72in Te6edf3traceResultTb4b4b4.Te6edf3pathTa5d6ff" Tb4b4b4:Te6edf3keyTff7b72=Ta5d6ff"Ta5d6ff'd-' Tff7b72+ Te6edf3idxTa5d6ff"Tb4b4b4>
T8b949e<!-- node item -->
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex flex-col items-center group relative w-32 shrink-0"Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"w-14 h-14 rounded-2xl flex items-center justify-center transition-all duration-300 shadow-md group-hover:shadow-indigo-500/20 group-hover:scale-110 z-10"
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Te6edf3getNodeClassTb4b4b4(Te6edf3nodeTb4b4b4)Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Tb4b4b4:Te6edf3icon-nameTff7b72=Ta5d6ff"Te6edf3getNodeIconTb4b4b4(Te6edf3nodeTb4b4b4)Ta5d6ff" Te6edf3classTff7b72=Ta5d6ff"size-7" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"mt-4 text-center px-2 w-full"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"text-[11px] font-bold text-gray-900 dark:text-white truncate"Tb4b4b4>
Tff7b72{{
Te6edf3nodeTb4b4b4.Te6edf3name Tff7b72||
Te6edf3formatHashTb4b4b4(Te6edf3nodeTb4b4b4.Te6edf3hashTb4b4b4) Tff7b72||
Tb4b4b4(Te6edf3nodeTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff"unknown"
Tff7b72? Te6edf3$tTb4b4b4(Ta5d6ff"tools.rnpath_trace.unknown_hops"Tb4b4b4, Tb4b4b4{ Te6edf3countTff7b72: Te6edf3nodeTb4b4b4.Te6edf3count Tb4b4b4}Tb4b4b4)
Tff7b72: Ta5d6ff""Tb4b4b4)
Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3nodeTb4b4b4.Tff7b72interfaceTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"text-[9px] text-indigo-500 font-mono font-bold mt-0.5 truncate"
Tb4b4b4>
Tff7b72{{ Te6edf3nodeTb4b4b4.Tff7b72interface Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- tooltip -->
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3nodeTb4b4b4.Te6edf3hashTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"absolute -top-10 left-1/2 -translate-x-1/2 bg-zinc-900 dark:bg-zinc-800 text-white text-[10px] px-2 py-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-all shadow-xl border border-zinc-700 pointer-events-none font-mono whitespace-nowrap z-20"
Tb4b4b4>
Tff7b72{{ Te6edf3nodeTb4b4b4.Te6edf3hash Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- connector -->
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3idx Tff7b72< Te6edf3traceResultTb4b4b4.Te6edf3pathTb4b4b4.Te6edf3length Tff7b72- T79c0ff1Ta5d6ff"
Te6edf3classTff7b72=Ta5d6ff"flex-1 min-w-[40px] max-w-[100px] mt-7 h-0.5 relative"
Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"absolute inset-0 bg-indigo-500/30"
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Tb4b4b4{
Ta5d6ff'border-t-2 border-dashed border-indigo-300 dark:border-indigo-800 bg-transparent h-0'Tff7b72:
Te6edf3traceResultTb4b4b4.Te6edf3pathTb4b4b4[Te6edf3idx Tff7b72+ T79c0ff1Tb4b4b4]Tb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff'unknown' Tff7b72||
Te6edf3nodeTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff'unknown'Tb4b4b4,
Tb4b4b4}Ta5d6ff"
Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"
Te6edf3traceResultTb4b4b4.Te6edf3pathTb4b4b4[Te6edf3idx Tff7b72+ T79c0ff1Tb4b4b4]Tb4b4b4.Te6edf3type Tff7b72!== Ta5d6ff'unknown' Tff7b72&& Te6edf3nodeTb4b4b4.Te6edf3type Tff7b72!== Ta5d6ff'unknown'
Ta5d6ff"
Te6edf3classTff7b72=Ta5d6ff"absolute right-0 -top-1 w-2 h-2 rounded-full bg-indigo-500 shadow-xs shadow-indigo-500/50"
Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- Mobile View (Vertical) -->
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"md:hidden space-y-0"Tb4b4b4>
Tb4b4b4<Tff7b72template Te6edf3v-forTff7b72=Ta5d6ff"Tb4b4b4(Te6edf3nodeTb4b4b4, Te6edf3idxTb4b4b4) Tff7b72in Te6edf3traceResultTb4b4b4.Te6edf3pathTa5d6ff" Tb4b4b4:Te6edf3keyTff7b72=Ta5d6ff"Ta5d6ff'm-' Tff7b72+ Te6edf3idxTa5d6ff"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex gap-4"Tb4b4b4>
T8b949e<!-- timeline axis -->
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex flex-col items-center w-10 shrink-0"Tb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3classTff7b72=Ta5d6ff"w-10 h-10 rounded-xl flex items-center justify-center shadow-md z-10"
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"Te6edf3getNodeClassTb4b4b4(Te6edf3nodeTb4b4b4)Ta5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Tb4b4b4:Te6edf3icon-nameTff7b72=Ta5d6ff"Te6edf3getNodeIconTb4b4b4(Te6edf3nodeTb4b4b4)Ta5d6ff" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4/Tb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3idx Tff7b72< Te6edf3traceResultTb4b4b4.Te6edf3pathTb4b4b4.Te6edf3length Tff7b72- T79c0ff1Ta5d6ff"
Te6edf3classTff7b72=Ta5d6ff"w-0.5 flex-1 min-h-[40px] my-1"
Tb4b4b4:Te6edf3classTff7b72=Ta5d6ff"
Te6edf3traceResultTb4b4b4.Te6edf3pathTb4b4b4[Te6edf3idx Tff7b72+ T79c0ff1Tb4b4b4]Tb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff'unknown' Tff7b72||
Te6edf3nodeTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff'unknown'
Tff7b72? Ta5d6ff'border-l-2 border-dashed border-indigo-300 dark:border-indigo-800'
Tff7b72: Ta5d6ff'bg-indigo-500/30'
Ta5d6ff"
Tb4b4b4>Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- content -->
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex-1 pb-6 pt-1 min-w-0"Tb4b4b4>
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"font-bold text-sm text-gray-900 dark:text-white truncate"Tb4b4b4>
Tff7b72{{
Te6edf3nodeTb4b4b4.Te6edf3name Tff7b72||
Tb4b4b4(Te6edf3nodeTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff"unknown"
Tff7b72? Te6edf3$tTb4b4b4(Ta5d6ff"tools.rnpath_trace.unknown_hops"Tb4b4b4, Tb4b4b4{ Te6edf3countTff7b72: Te6edf3nodeTb4b4b4.Te6edf3count Tb4b4b4}Tb4b4b4)
Tff7b72: Te6edf3formatHashTb4b4b4(Te6edf3nodeTb4b4b4.Te6edf3hashTb4b4b4)Tb4b4b4)
Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3nodeTb4b4b4.Te6edf3hashTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"text-[10px] font-mono text-gray-500 dark:text-gray-400 mt-0.5 truncate"
Tb4b4b4>
Tff7b72{{ Te6edf3nodeTb4b4b4.Te6edf3hash Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tff7b72div
Te6edf3v-ifTff7b72=Ta5d6ff"Te6edf3nodeTb4b4b4.Tff7b72interfaceTa5d6ff"
Te6edf3classTff7b72=Ta5d6ff"inline-flex items-center gap-1 mt-1.5 px-2 py-0.5 bg-indigo-50 dark:bg-indigo-900/20 text-indigo-600 dark:text-indigo-400 rounded-sm text-[9px] font-bold uppercase tracking-wider"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"router-wireless" Te6edf3classTff7b72=Ta5d6ff"size-3" Tb4b4b4/Tb4b4b4>
Tff7b72{{ Te6edf3nodeTb4b4b4.Tff7b72interface Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
T8b949e<!-- action buttons -->
Tb4b4b4<Tff7b72div Te6edf3classTff7b72=Ta5d6ff"flex flex-col sm:flex-row items-center justify-center gap-3"Tb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3classTff7b72=Ta5d6ff"w-full sm:w-auto px-6 py-3 bg-indigo-100 hover:bg-indigo-200 dark:bg-indigo-900/30 dark:hover:bg-indigo-900/50 text-indigo-700 dark:text-indigo-300 rounded-2xl font-bold transition flex items-center justify-center gap-2 text-sm"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3pingDestinationTa5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"radar" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4/Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"tools.rnpath_trace.ping_test"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tff7b72button
Te6edf3classTff7b72=Ta5d6ff"w-full sm:w-auto px-6 py-3 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 hover:bg-gray-50 dark:hover:bg-zinc-800 text-gray-600 dark:text-gray-300 rounded-2xl font-bold transition flex items-center justify-center gap-2 text-sm"
Tb4b4b4@Te6edf3clickTff7b72=Ta5d6ff"Te6edf3copyDestinationHashTa5d6ff"
Tb4b4b4>
Tb4b4b4<Tff7b72MaterialDesignIcon Te6edf3icon-nameTff7b72=Ta5d6ff"content-copy" Te6edf3classTff7b72=Ta5d6ff"size-5" Tb4b4b4/Tb4b4b4>
Tff7b72{{ Te6edf3$tTb4b4b4(Ta5d6ff"common.copy_to_clipboard"Tb4b4b4) Tff7b72}}
Tb4b4b4<Tb4b4b4/Tff7b72buttonTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72divTb4b4b4>
Tb4b4b4<Tb4b4b4/Tff7b72templateTb4b4b4>
Tb4b4b4<Tff7b72scriptTb4b4b4>
Tff7b72import Te6edf3MaterialDesignIcon Tff7b72from Ta5d6ff"../MaterialDesignIcon.vue"Tb4b4b4;
Tff7b72import Te6edf3ToastUtils Tff7b72from Ta5d6ff"../../js/ToastUtils"Tb4b4b4;
Tff7b72import Te6edf3ToolsPageHeader Tff7b72from Ta5d6ff"./ToolsPageHeader.vue"Tb4b4b4;
Tff7b72export Tff7b72default Tb4b4b4{
Te6edf3nameTff7b72: Ta5d6ff"RNPathTracePage"Tb4b4b4,
Te6edf3componentsTff7b72: Tb4b4b4{
Te6edf3MaterialDesignIconTb4b4b4,
Te6edf3ToolsPageHeaderTb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3dataTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Tb4b4b4{
Te6edf3destinationHashTff7b72: Ta5d6ff""Tb4b4b4,
Te6edf3isLoadingTff7b72: Tff7b72falseTb4b4b4,
Te6edf3traceResultTff7b72: Tff7b72nullTb4b4b4,
Te6edf3errorTff7b72: Tff7b72nullTb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3computedTff7b72: Tb4b4b4{
Te6edf3isValidHashTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72return Ta5d6ff/^[0-9a-f]{32}$/iTb4b4b4.Te6edf3testTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3destinationHashTb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Te6edf3mountedTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$routeTb4b4b4.Te6edf3queryTb4b4b4.Te6edf3hashTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3destinationHash Tff7b72= Tff7b72thisTb4b4b4.Te6edf3$routeTb4b4b4.Te6edf3queryTb4b4b4.Te6edf3hashTb4b4b4;
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3isValidHashTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3runTraceTb4b4b4(Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3methodsTff7b72: Tb4b4b4{
Tff7b72async Te6edf3runTraceTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72!Tff7b72thisTb4b4b4.Te6edf3isValidHashTb4b4b4) Tff7b72returnTb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3isLoading Tff7b72= Tff7b72trueTb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3error Tff7b72= Tff7b72nullTb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3traceResult Tff7b72= Tff7b72nullTb4b4b4;
Tff7b72try Tb4b4b4{
Tff7b72const Te6edf3res Tff7b72= Tff7b72await Tffa657windowTb4b4b4.Te6edf3apiTb4b4b4.Te6edf3getTb4b4b4(Ta5d6ff`Ta5d6ff/api/v1/rnpath/trace/Tffd700${Tff7b72thisTb4b4b4.Te6edf3destinationHashTffd700}Ta5d6ff`Tb4b4b4)Tb4b4b4;
Tff7b72if Tb4b4b4(Te6edf3resTb4b4b4.Te6edf3dataTb4b4b4.Te6edf3errorTb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3error Tff7b72= Te6edf3resTb4b4b4.Te6edf3dataTb4b4b4.Te6edf3errorTb4b4b4;
Tb4b4b4} Tff7b72else Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3traceResult Tff7b72= Te6edf3resTb4b4b4.Te6edf3dataTb4b4b4;
Tb4b4b4}
Tb4b4b4} Tff7b72catch Tb4b4b4(Te6edf3eTb4b4b4) Tb4b4b4{
Te6edf3consoleTb4b4b4.Te6edf3errorTb4b4b4(Te6edf3eTb4b4b4)Tb4b4b4;
Tff7b72thisTb4b4b4.Te6edf3error Tff7b72=
Te6edf3eTb4b4b4.Te6edf3responseTff7b72?Tb4b4b4.Te6edf3dataTff7b72?Tb4b4b4.Te6edf3error Tff7b72||
Te6edf3eTb4b4b4.Te6edf3responseTff7b72?Tb4b4b4.Te6edf3dataTff7b72?Tb4b4b4.Te6edf3message Tff7b72||
Ta5d6ff"Failed to communicate with the backend handler."Tb4b4b4;
Tb4b4b4} Tff7b72finally Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3isLoading Tff7b72= Tff7b72falseTb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Te6edf3getNodeClassTb4b4b4(Te6edf3nodeTb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Te6edf3nodeTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff"local"Tb4b4b4) Tff7b72return Ta5d6ff"bg-blue-600 text-white"Tb4b4b4;
Tff7b72if Tb4b4b4(Te6edf3nodeTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff"destination"Tb4b4b4) Tff7b72return Ta5d6ff"bg-emerald-600 text-white"Tb4b4b4;
Tff7b72if Tb4b4b4(Te6edf3nodeTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff"unknown"Tb4b4b4)
Tff7b72return Ta5d6ff"bg-gray-100 dark:bg-zinc-800 text-gray-400 dark:text-gray-600 border-2 border-dashed border-gray-200 dark:border-zinc-700 shadow-none"Tb4b4b4;
Tff7b72return Ta5d6ff"bg-indigo-600 text-white"Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3getNodeIconTb4b4b4(Te6edf3nodeTb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Te6edf3nodeTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff"local"Tb4b4b4) Tff7b72return Ta5d6ff"home"Tb4b4b4;
Tff7b72if Tb4b4b4(Te6edf3nodeTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff"destination"Tb4b4b4) Tff7b72return Ta5d6ff"flag-variant"Tb4b4b4;
Tff7b72if Tb4b4b4(Te6edf3nodeTb4b4b4.Te6edf3type Tff7b72=== Ta5d6ff"unknown"Tb4b4b4) Tff7b72return Ta5d6ff"dots-horizontal"Tb4b4b4;
Tff7b72return Ta5d6ff"router-wireless"Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3formatHashTb4b4b4(Te6edf3hashTb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72!Te6edf3hashTb4b4b4) Tff7b72return Ta5d6ff""Tb4b4b4;
Tff7b72return Te6edf3hashTb4b4b4.Te6edf3substringTb4b4b4(T79c0ff0Tb4b4b4, T79c0ff8Tb4b4b4) Tff7b72+ Ta5d6ff"..."Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3pingDestinationTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72thisTb4b4b4.Te6edf3$routerTb4b4b4.Te6edf3pushTb4b4b4(Tb4b4b4{
Te6edf3nameTff7b72: Ta5d6ff"ping"Tb4b4b4,
Te6edf3queryTff7b72: Tb4b4b4{
Te6edf3hashTff7b72: Tff7b72thisTb4b4b4.Te6edf3destinationHashTb4b4b4,
Te6edf3autostartTff7b72: Ta5d6ff"1"Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4)Tb4b4b4;
Tb4b4b4}Tb4b4b4,
Te6edf3copyDestinationHashTb4b4b4(Tb4b4b4) Tb4b4b4{
Tff7b72if Tb4b4b4(Tff7b72thisTb4b4b4.Te6edf3destinationHashTb4b4b4) Tb4b4b4{
Te6edf3navigatorTb4b4b4.Te6edf3clipboardTb4b4b4.Te6edf3writeTextTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3destinationHashTb4b4b4)Tb4b4b4;
Te6edf3ToastUtilsTb4b4b4.Te6edf3successTb4b4b4(Tff7b72thisTb4b4b4.Te6edf3$tTb4b4b4(Ta5d6ff"common.copied"Tb4b4b4)Tb4b4b4)Tb4b4b4;
Tb4b4b4}
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4,
Tb4b4b4}Tb4b4b4;
Tb4b4b4<Tb4b4b4/Tff7b72scriptTb4b4b4>
──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────